<template>
  <div class="InboundList-box">
    <!-- 新闻动态 -->
    <h3 class="mb16">新闻动态</h3>
    <!-- 搜索栏 -->
    <serchForm
        :Form="inventoryForm"
        :FormLabel="inventoryFormLabel"
        @onSearch="onSearch"/>
    <!-- 增删改查 -->
        <div class="function-box" v-if="checkPermi(['system:notice:edit'])">
                <el-button class="addBtn2" @click="handleAdd">发布</el-button>
                <!-- <el-button class="createBtn">编辑</el-button> -->
                <!-- <el-button class="exportBtn">删除</el-button> -->
        </div>
    <!-- 新闻动态列表页面 -->
    <el-table border v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column label="标题名称"  align="left" prop="noticeTitle" :show-overflow-tooltip="true"/>
      <el-table-column label="发布人" align="center" prop="nickName" width="160"/>
      <el-table-column label="发布时间" sortable align="center" prop="releaseDate" width="200" >
         <template #default="scope">
             <!-- {{ scope.row.releaseDate.slice(0, 16) }} -->
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template #default="scope">
          <el-button  link class="putBtn" @click="handleDetail(scope.row)">详情</el-button>
          <el-button  v-if="checkPermi(['system:notice:edit'])" link class="putBtn" @click="handleClick(scope.row)">
            编辑
          </el-button>
          <el-button v-if="checkPermi(['system:notice:remove'])" link class="delBtn" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
      @update:page="updatePage" @update:limit="updateLimit" :pageSizes="pageSizes" @pagination="handleChange" />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import serchForm from '@/components/inventory/serchForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import pagination from '@/components/Pagination/index'
import { checkPermi } from '@/utils/permission.js'
import {listNotice,getdeptApi,addNotice,delNotice,updateNotice} from '@/api/system/notice.js'
import {useListStore} from '@/store/modules/news.js'
import { storeToRefs } from 'pinia'

const router = useRouter();
const route = useRoute();
const data = reactive({});
const { proxy } = getCurrentInstance();
const newsPut = useListStore()
const { editIdLong } = storeToRefs(newsPut) // 解构并保持响应性

const loading = ref(false)
const treeRef = ref(null);
// 表单
let inventoryForm = ref({
  releaseDate: '', // 发布日期
  noticeTitle: '', // 标题名称
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'releaseDate',
    label: '发布日期',
    type: 'datetimerange',
  },
  {
    name: 'noticeTitle',
    label: '标题名称',
  },
])
// 查询
const onSearch = (v) => {
  console.log(v, '查询入库参数')
  // 每次查询后回到页1
  pageNum.value = 1
  v.startDate = v.releaseDate[0]
  v.endDate = v.releaseDate[1]
  listNoticeFn(v)
}

const title = ref("");

const pageSizes = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(0)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)

// 当前页面位置发生变化
const updatePage = (val) => {
  console.log(val, '第几页');
  pageNum.value = val
  listNoticeFn()
}
// 条目个数发生变化
const updateLimit = (val) => {
  console.log(val, '每页多少条');
  pageSize.value = val
  listNoticeFn()
}
// 分页器大小  当前分页器
const handleChange = (page, pageSize) => {
    console.log(page,pageSize,'打印page,pageSize');
    
}
// 表格数据内容
let dataList = ref([])
const pageType = ref('') // 当前页面状态
/** 新增按钮操作 */
function handleAdd() {
  title.value = '上传新闻动态'
  newsPut.fetchList({noticeId:-1})
  pageType.value = 'newsadd'
  router.push({path:`/newsDetail/${pageType.value}/${editIdLong.value}`})
  // router.push({path:`/newsDetail/${editIdLong.value}`})
}
/**搜索*/
// 搜索方法


/** 详情按钮操作 */
function handleDetail(row) {
  newsPut.fetchList(row)
  router.push({
    path: `/newsDetailYulan`,
  })
}

/** 修改按钮操作 */
function handleClick(row) {
  title.value = "编辑新闻动态";
  newsPut.fetchList(row)
  pageType.value = 'newsedit'
  router.push({path:`/newsDetail/${pageType.value}/${editIdLong.value}`})
  // router.push({path:`/newsDetail/${editIdLong.value}`})
}

/** 删除按钮操作 */
function handleDelete(row) {
    ElMessageBox.confirm(
    '确定要删除该新闻动态吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         delNotice(row.noticeId).then(res=>{
            console.log(res,'删除成功');
            if(res.code===200){
                ElMessage({
                 message: '删除成功',
                 type: 'success',
               })
               listNoticeFn()
            }
         })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const listNoticeFn = async (data='')=>{  //获取列表数据
  let page;
  page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    noticeType: 2
  };
  let params = Object.assign(page,data)
  delete params.releaseDate
    listNotice(params).then(res=>{
       if(res.code===200){
            dataList.value = res.rows
            total.value = res.total
       }
    })
}
// 获取发布范围下拉信息
const genderOptions = ref([])
const getdeptApiFn = async () => {
  let page = {
     pageNum: 1,
     pageSize:-1,
  }
  let res = await getdeptApi(page)
  // console.log(res,'打印发布范围');
  if (res.code == 200) {
     genderOptions.value = res.data
  }
}
onMounted(() => {
  listNoticeFn()
  if( JSON.parse(localStorage.getItem('userInfo')).postIds[0] === 1){
  // 1 教师 2 学生
    getdeptApiFn()
  }
})
</script>

<style lang='scss' scoped>
.InboundList-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
}
</style>
